<template lang="pug">
dt#update {{$t('setting__update')}}
dd
  .gap-top
    base-checkbox(id="setting__update_tryAutoUpdate" :modelValue="appSetting['common.tryAutoUpdate']" @update:modelValue="updateSetting({'common.tryAutoUpdate': $event})" :label="$t('setting__update_try_auto_update')")
  .gap-top
    base-checkbox(id="setting__update_showChangeLog" :modelValue="appSetting['common.showChangeLog']" @update:modelValue="updateSetting({'common.showChangeLog': $event})" :label="$t('setting__update_show_change_log')")
  .gap-top
    p.small
      | {{$t('setting__update_latest_label')}}{{versionInfo.newVersion ? versionInfo.newVersion.version : $t('setting__update_unknown')}}
    p.small(@click="handleOpenDevTools") {{$t('setting__update_current_label')}}{{versionInfo.version}}
    p.small(v-if="downloadProgress" style="line-height: 1.5;")
      | {{$t('setting__update_downloading')}}
      br
      | {{$t('setting__update_progress')}}{{downloadProgress}}
    template(v-if="versionInfo.newVersion")
      p(v-if="versionInfo.isLatest")
        span {{$t('setting__update_latest')}}
      p(v-else-if="versionInfo.status != 'downloading'")
        span {{ $t('setting__update_new_version') }}
      p
        base-btn.btn.gap-left(min @click="showUpdateModal") {{$t('setting__update_open_version_modal_btn')}}
    p.small(v-else-if="versionInfo.status =='checking'") {{$t('setting__update_checking')}}
</template>

<script>
import { computed } from '@common/utils/vueTools'
import { versionInfo } from '@renderer/store'
import { sizeFormate } from '@common/utils/common'
// import { openDirInExplorer, selectDir } from '@renderer/utils'
import { openDevTools } from '@renderer/utils/ipc'
import { useI18n } from '@renderer/plugins/i18n'
import { appSetting, updateSetting } from '@renderer/store/setting'

export default {
  name: 'SettingUpdate',
  setup() {
    let lastClickTime = 0
    let clickNum = 0

    const t = useI18n()

    const handleOpenDevTools = () => {
      if (window.performance.now() - lastClickTime > 1000) {
        if (clickNum > 0) clickNum = 0
      } else {
        if (clickNum > 4) {
          openDevTools()
          clickNum = 0
          return
        }
      }
      clickNum++
      lastClickTime = window.performance.now()
    }

    const downloadProgress = computed(() => {
      return versionInfo.status == 'downloading'
        ? versionInfo.downloadProgress
          ? `${versionInfo.downloadProgress.percent.toFixed(2)}% - ${sizeFormate(versionInfo.downloadProgress.transferred)}/${sizeFormate(versionInfo.downloadProgress.total)} - ${sizeFormate(versionInfo.downloadProgress.bytesPerSecond)}/s`
          : t('setting__update_init')
        : ''
    })

    const showUpdateModal = () => {
      versionInfo.showModal = true
    }

    return {
      versionInfo,
      downloadProgress,
      handleOpenDevTools,
      showUpdateModal,
      appSetting,
      updateSetting,
    }
  },
}
</script>

<style lang="less" module>
.save-path {
  font-size: 12px;
}
</style>
